<template>
    <div id="TodoMain">
        <!-- 列表区域 -->
        <section class="main">
            <ul class="todo-list">
                <li class="todo" v-for="(item, index) in list" :key="item.id">
                    <div class="view">
                        <span class="index">{{ index + 1 }}</span> <label>{{ item.shiqing }}--{{ ceshi }}</label>
                        <button class="destroy" @click="closeLi(item.id)"></button>
                    </div>
                </li>
            </ul>
        </section>
    </div>
</template>

<script>
export default {
    props: ['list'],
    data() {
        return {
            ceshi: '',
        }
    },
    methods: {
        closeLi(id) {
            // $meit()中的两个参数分别为：父组件需要监听的事件名，和传递给父组件的值
            this.$emit("closeLi", id)
        },
    },
    mounted() {
        this.$bus.$on('ceshi', item => this.ceshi = item)
    }
}
</script>

<style lang="less" scoped>
.main {
    position: relative;
    z-index: 2;

    .todo-list {
        margin: 0;
        padding: 0;
        list-style: none;
        overflow: hidden;

        li {
            position: relative;
            font-size: 24px;
            height: 60px;
            box-sizing: border-box;
            border-bottom: 1px solid #e6e6e6;

            &:last-child {
                border-bottom: none;
            }

            &:hover .destroy {
                display: block;
            }


            .toggle {
                text-align: center;
                width: 40px;
                /* auto, since non-WebKit browsers doesn't support input styling */
                height: auto;
                opacity: 0;
                position: absolute;
                top: 0;
                bottom: 0;
                margin: auto 0;
                border: none;
                /* Mobile Safari */
                -webkit-appearance: none;
                appearance: none;
            }

            .toggle+label {
                background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
                background-repeat: no-repeat;
                background-position: center left;

                &:checked+label {
                    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
                }
            }

            label {
                word-break: break-all;
                padding: 15px 15px 15px 60px;
                display: block;
                line-height: 1.2;
                transition: color 0.4s;
            }

            .completed label {
                color: #d9d9d9;
                text-decoration: line-through;
            }

            .destroy {
                display: none;
                position: absolute;
                top: 0;
                right: 10px;
                bottom: 0;
                width: 40px;
                height: 40px;
                margin: auto 0;
                font-size: 30px;
                color: #cc9a9a;
                margin-bottom: 11px;
                transition: color 0.2s ease-out;

                &:hover {
                    color: #af5b5e;
                }

                &:after {
                    content: '×';
                }
            }

            .edit {
                display: none;
            }

            .editing {
                &:last-child {
                    margin-bottom: -1px;
                }

            }
        }
    }
}

.todo-list .view .index {
    position: absolute;
    color: gray;
    left: 10px;
    top: 20px;
    font-size: 22px;
}
</style>